///// HTML

/* 历史记录回显背景颜色 */
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  -webkit-text-fill-color: #333;
  transition: background-color 5000s ease-in-out 0s;
}

/* 密码框 */
input[type='password']::-ms-reveal {
  /* 隐藏密码显示的 👁️ 图标 */
  display: none;
}

///// UI

/* 请求提示 */
.ex--request--notification--notice {
  padding: 16px;

  .ant-notification-notice-with-icon {
    > .ant-notification-notice-icon {
      top: 36px;
      font-size: 22px;
      user-select: none;
    }

    > .ant-notification-notice-message {
      margin-inline-start: 42px;
      font-size: 14px;
    }

    > .ant-notification-notice-description {
      margin-inline-start: 16px;

      .icon {
        margin-right: 12px;
        user-select: none;
      }
      .code {
        margin-right: 6px;
      }
      .text {
        word-break: break-all;
        max-height: 81px;
        overflow: auto;
      }

      > .result {
        > div {
          display: flex;
        }

        > .url {
          > .text {
            font-family: 'Consolas';
          }
        }

        > .status {
          span {
            font-family: D-DIN;
            font-size: 15px;
            font-weight: 700;
          }
        }
        > .message {
          margin-top: 3px;
          span {
            font-family: D-DIN;
          }
        }
      }
    }
  }
}

/* 标签栏 */
.ex--tabs {
  > .ant-tabs-nav {
    margin-bottom: 0;

    &::before {
      bottom: 1px;
    }

    .ant-tabs-tab {
      padding-top: 0px;

      &.ant-tabs-tab-active > .ant-tabs-tab-btn {
        color: #268cff;
        font-weight: 700;
      }
      .ant-tabs-tab-btn:active {
        color: #268cff;
      }
    }

    .ant-tabs-ink-bar {
      background-color: #268cff;
      height: 4px;
    }
  }
}

/* 面板 */
.ex--panel {
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
}

/* 标签面板 */
.ex--tabs--panel {
  background-color: #fff;

  > .ant-tabs-nav {
    margin-bottom: 0;

    &::before {
      @include after2block();
      position: absolute;
      bottom: 0;
      height: 1px;
      width: 100%;
      background-color: rgba(5, 5, 5, 0.06);
    }

    > .ant-tabs-nav-wrap {
      > .ant-tabs-nav-list {
        > .ant-tabs-tab {
          padding: 8px 16px;
          border-right: 1px solid rgba(5, 5, 5, 0.06);
          user-select: none;

          &::after {
            @include after2block();
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #fff;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
          }
          &.ant-tabs-tab-active::after {
            opacity: 1;
          }
        }
        > .ant-tabs-tab + .ant-tabs-tab {
          margin-left: 0;
        }

        > .ant-tabs-ink-bar {
          top: 0;
          bottom: auto;
          height: 4px;
          background: #268cff;
        }
      }
    }
  }
}

/* 抽屉 */
.ex-drawer > .ant-drawer-wrapper-body {
  > .ant-drawer-header {
    padding: 8px 16px;
  }

  > .ant-drawer-body {
    padding: 0;
  }
}

/* 状态 */

.ex--status--base {
  position: relative;
  padding-left: 16px;
  @include before() {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
}
.ex--status--green {
  @extend .ex--status--base;
  color: #00d8a0;
  @include before() {
    background-color: #00d8a0;
  }
}
.ex--status--red {
  @extend .ex--status--base;
  color: #ff4444;
  @include before() {
    background-color: #ff4444;
  }
}
.ex--status--blue {
  @extend .ex--status--base;
  color: #268cff;
  @include before() {
    background-color: #268cff;
  }
}
.ex--status--gray {
  @extend .ex--status--base;
  color: #c0d0eb;
  @include before() {
    background-color: #c0d0eb;
  }
}

.ex--status {
  padding: 3px 6px;
  text-align: center;
  border-radius: 2px;

  &.info {
    color: #268cff;
    background-color: #dfeeff;
    border: 1px solid #268cff;
  }
  &.warning {
    color: #ff8745;
    background-color: #fff7e3;
    border: 1px solid #ff8745;
  }
  &.success {
    color: #36b342;
    background-color: #e6f6e7;
    border: 1px solid #36b342;
  }
  &.error {
    color: #ff4444;
    background-color: #ffede3;
    border: 1px solid #ff4444;
  }
}

.ex--alarm-status {
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-radius: 20px;
  text-align: center;
  color: white;
  font-size: 14px;
  margin: auto;
}
.ex--alarm--normal {
  background: #d97b84;
}
.ex--alarm--serious {
  background: #fcc229;
}
.ex--alarm--accident {
  background: #f40f26;
}
